<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/operationsummary/Operations' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>员工管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <br />
    <!-- 页面上方的分标签页 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="员工列表" name="first">
        <!-- 员工列表组件 -->
        <employee />
      </el-tab-pane>
      <el-tab-pane label="科室列表" name="second">
        <!-- 科室列表组件 -->
        <office />
      </el-tab-pane>
      <el-tab-pane label="角色列表" name="third">
        <!-- 角色列表组件 -->
        <role />
      </el-tab-pane>
      
    </el-tabs>
  </div>
</template>


<script>
// 导入组件
import Role from "./Role.vue";
import Clinic from "./Clinic.vue";
import Employee from "./Employee.vue";
import Office from "./Office.vue";

export default {
  // 导入的组件写到这里
  components: { Employee, Office, Role, Clinic },

  data() {
    return {
      // 默认选中的组件
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>